<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
            W3C 规范的事件系统
                1、内置功能事件，click input ……
                2、用户自定义事件系统，通过JS内置自定义事件对象，可以创建任意被浏览器识别的事件
        */
       window.onload = function(){
           var btnDom = document.querySelector("#btn");
           btnDom.addEventListener("click",function(){
               console.log("click事件被触发")
               e.detail.aaa = 111;
               this.dispatchEvent(e);
           })

           var e = new CustomEvent("myEvent",{
               detail:{
                   name:"tom",
                   age:23
               }
           })

           btnDom.addEventListener("myEvent",function(event){
               console.log("myEvent事件被触发",event);
           })

        //    btnDom.dispatchEvent(e);
       }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
</body>

</html>